<template>
  <div :id="id" style="height:100%;width:100%;"></div>
</template>

<script>
  import echarts from 'echarts'
  let data = 99

  export default {
    name: '',
    data () {
      return {
        chart: null
      }
    },
    props: {
      charData: {
        type: Number,
        default: () => {
          return data
        }
      },
      id: String
    },
    beforeUpdate: function () {
      this.drawPie(this.id)
    },
    watch: {
      charData: function (val, oldVal) {
        this.drawPie(this.id)
      }
    },
    methods: {
      drawPie (id) {
        this.charts = echarts.init(document.getElementById(id))
        let data = this.charData
        let _data = {
//          tooltip: false,
          tooltip: {
            formatter: "{b} : {c}%"
          },
          toolbox: false,
          series: [
            {
              name: '',
              type: 'gauge',
//              splitNumber: 0,
//              markPoint: false,
              startAngle: 180,
              endAngle: 0,
              center: ['50%', '90%'],    // 默认全局居中
              radius: 85,
              axisLine: {// 坐标轴线
                lineStyle: {// 属性lineStyle控制线条样式
                  color: [
                    [0.25, '#F4E600'],
                    [0.75, '#F27618'],
                    [1, '#E81929']
                  ],
                  width: 50
                }
              },
              axisTick: {// 坐标轴小标记
                splitNumber: 0,   // 每份split细分多少段
                length: 0, // 属性length控制线长
                show: false
              },
              axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                formatter: function (v) {
                  switch (v + '') {
                    case '10':
                      return '低';
                    case '50':
                      return '中';
                    case '90':
                      return '高';
                    default:
                      return '';
                  }
                },
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: '#fff',
                  fontSize: 14,
                  fontWeight: 'bolder'
                }
              },
              pointer: {
                width: 3,
                length: '90%',
                color: 'rgba(255, 255, 255, 0.8)'
              },
              title: {
                show: false,
                offsetCenter: [0, '-60%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: '#fff',
                  fontSize: 12
                }
              },
              splitLine: {
                show: false,
                length: 10
              },
              detail: {
                show: true,
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: '#ccc',
                width: 100,
                height: 65,
                offsetCenter: [0, -10],       // x, y，单位px
                formatter: '{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: '#F27618',
                  fontSize: 18
                }
              },
              data: [{value: data, name: ''}]
            }
          ]
        }
        this.charts.setOption(_data)
      }
    },
    mounted () {
      this.$nextTick(function () {
        this.drawPie(this.id)
      })
    }
  }
</script>

<style scoped lang="">

</style>
